<template>
  <view class="table">
    <view class="table-th">
      <view style="width: 40px">维度</view>
      <view style="flex: 1">项目</view>
      <view style="width: 130px">是/有时/否</view>
      <!-- <view>有时</view> -->
      <!-- <view>否</view> -->
    </view>

    <view class="table-tr">
      <view>躯体功能方面</view>
      <view style="width: 200px; overflow: hidden; border: 0">
        <view style="">1.您觉得自己的身体健康吗</view>
        <view style="border-bottom: 0; height: 80px">
          2.您的体重是否有突然、明显 地减轻？（最近6个月下降到
          6kg以上；或最近一个月下降 超过3个月以上；排除刻意减 轻体重）
        </view>
        <view class="table-tr-three" style="border-bottom: 0">
          <view style="width: 70px; border-bottom: 0"
            >是否由于以下原因影响了您的日常生活</view
          >
          <view
            class="active22"
            style="
              text-align: left;
              border-bottom: 0;
              border-right: 0;
              width: 100%;
            "
          >
            <view>3.行走困难</view>
            <view>4.保持平衡困难</view>
            <view>5.听力差</view>
            <view>6.视力不好</view>
            <view>7.双手没劲</view>
            <view style="border-bottom: 0">8.身体疲乏</view>
          </view>
        </view>
      </view>
      <view class="active23">
        <view class="">
          <u-radio-group
            v-model="value1"
            placement="row"
            labelSize="30"
            size="30"
            iconSize="30"
            @change="change(1, $event)"
          >
            <u-radio
              activeColor="#F2AF60"
              name="是"
              label="是"
              labelSize="24"
            ></u-radio>
            <u-radio
              activeColor="#F2AF60"
              name="有时"
              label="有时"
              disabled
              labelSize="24"
            ></u-radio>
            <u-radio
              activeColor="#F2AF60"
              name="否"
              label="否"
              labelSize="24"
            ></u-radio>
          </u-radio-group>
        </view>
        <view style="height: 80px; display: flex; align-items: center">
          <u-radio-group
            v-model="value2"
            placement="row"
            labelSize="30"
            size="30"
            iconSize="30"
            @change="change(2, $event)"
          >
            <u-radio
              activeColor="#F2AF60"
              name="是"
              label="是"
              labelSize="24"
            ></u-radio>
            <u-radio
              activeColor="#F2AF60"
              name="有时"
              label="有时"
              disabled
              labelSize="24"
            ></u-radio>
            <u-radio
              activeColor="#F2AF60"
              name="否"
              label="否"
              labelSize="24"
            ></u-radio>
          </u-radio-group>
        </view>
        <view>
          <u-radio-group
            v-model="value3"
            placement="row"
            labelSize="30"
            size="30"
            iconSize="30"
            @change="change(3, $event)"
          >
            <u-radio
              activeColor="#F2AF60"
              name="是"
              label="是"
              labelSize="24"
            ></u-radio>
            <u-radio
              activeColor="#F2AF60"
              name="有时"
              label="有时"
              disabled
              labelSize="24"
            ></u-radio>
            <u-radio
              activeColor="#F2AF60"
              name="否"
              label="否"
              labelSize="24"
            ></u-radio>
          </u-radio-group>
        </view>
        <view>
          <u-radio-group
            v-model="value4"
            placement="row"
            labelSize="30"
            size="30"
            iconSize="30"
            @change="change(4, $event)"
          >
            <u-radio
              activeColor="#F2AF60"
              name="是"
              label="是"
              labelSize="24"
            ></u-radio>
            <u-radio
              activeColor="#F2AF60"
              name="有时"
              label="有时"
              disabled
              labelSize="24"
            ></u-radio>
            <u-radio
              activeColor="#F2AF60"
              name="否"
              label="否"
              labelSize="24"
            ></u-radio>
          </u-radio-group>
        </view>
        <view>
          <u-radio-group
            v-model="value5"
            placement="row"
            labelSize="30"
            size="30"
            iconSize="30"
            @change="change(5, $event)"
          >
            <u-radio
              activeColor="#F2AF60"
              name="是"
              label="是"
              labelSize="24"
            ></u-radio>
            <u-radio
              activeColor="#F2AF60"
              name="有时"
              label="有时"
              disabled
              labelSize="24"
            ></u-radio>
            <u-radio
              activeColor="#F2AF60"
              name="否"
              label="否"
              labelSize="24"
            ></u-radio>
          </u-radio-group>
        </view>
        <view>
          <u-radio-group
            v-model="value6"
            placement="row"
            labelSize="30"
            size="30"
            iconSize="30"
            @change="change(6, $event)"
          >
            <u-radio
              activeColor="#F2AF60"
              name="是"
              label="是"
              labelSize="24"
            ></u-radio>
            <u-radio
              activeColor="#F2AF60"
              name="有时"
              label="有时"
              disabled
              labelSize="24"
            ></u-radio>
            <u-radio
              activeColor="#F2AF60"
              name="否"
              label="否"
              labelSize="24"
            ></u-radio>
          </u-radio-group>
        </view>
        <view>
          <u-radio-group
            v-model="value7"
            placement="row"
            labelSize="30"
            size="30"
            iconSize="30"
            @change="change(7, $event)"
          >
            <u-radio
              activeColor="#F2AF60"
              name="是"
              label="是"
              labelSize="24"
            ></u-radio>
            <u-radio
              activeColor="#F2AF60"
              name="有时"
              label="有时"
              disabled
              labelSize="24"
            ></u-radio>
            <u-radio
              activeColor="#F2AF60"
              name="否"
              label="否"
              labelSize="24"
            ></u-radio>
          </u-radio-group>
        </view>
        <view style="border-bottom: 0">
          <u-radio-group
            v-model="value8"
            placement="row"
            labelSize="30"
            size="30"
            iconSize="30"
            @change="change(8, $event)"
          >
            <u-radio
              activeColor="#F2AF60"
              name="是"
              label="是"
              labelSize="24"
            ></u-radio>
            <u-radio
              activeColor="#F2AF60"
              name="有时"
              label="有时"
              disabled
              labelSize="24"
            ></u-radio>
            <u-radio
              activeColor="#F2AF60"
              name="否"
              label="否"
              labelSize="24"
            ></u-radio>
          </u-radio-group>
        </view>
      </view>
    </view>

    <view class="table-tr">
      <view>心理方面</view>
      <view style="width: 200px; overflow: hidden">
        <view>9.您的记忆力有没有问题</view>
        <view>10.您最近一个月有没有感到情绪低落</view>
        <view>11.您最近一个月有没有感到紧张或焦虑</view>
        <view style="border-bottom: 0">12.您能很好的处理遇到的问题吗</view>
      </view>
      <view class="active23">
        <view>
          <u-radio-group
            v-model="value9"
            placement="row"
            labelSize="30"
            size="30"
            iconSize="30"
            @change="change(9, $event)"
          >
            <u-radio
              activeColor="#F2AF60"
              name="是"
              label="是"
              labelSize="24"
            ></u-radio>
            <u-radio
              activeColor="#F2AF60"
              name="有时"
              label="有时"
              disabled
              labelSize="24"
            ></u-radio>
            <u-radio
              activeColor="#F2AF60"
              name="否"
              label="否"
              labelSize="24"
            ></u-radio>
          </u-radio-group>
        </view>

        <view style="height: 32px">
          <u-radio-group
            v-model="value10"
            placement="row"
            labelSize="30"
            size="30"
            iconSize="30"
            @change="change(10, $event)"
          >
            <u-radio
              activeColor="#F2AF60"
              name="是"
              label="是"
              labelSize="24"
            ></u-radio>
            <u-radio
              activeColor="#F2AF60"
              name="有时"
              label="有时"
              labelSize="24"
            ></u-radio>
            <u-radio
              activeColor="#F2AF60"
              name="否"
              label="否"
              labelSize="24"
            ></u-radio>
          </u-radio-group>
        </view>

        <view style="height: 32px">
          <u-radio-group
            v-model="value11"
            placement="row"
            labelSize="30"
            size="30"
            iconSize="30"
            @change="change(11, $event)"
          >
            <u-radio
              activeColor="#F2AF60"
              name="是"
              label="是"
              labelSize="24"
            ></u-radio>
            <u-radio
              activeColor="#F2AF60"
              name="有时"
              label="有时"
              labelSize="24"
            ></u-radio>
            <u-radio
              activeColor="#F2AF60"
              name="否"
              label="否"
              labelSize="24"
            ></u-radio>
          </u-radio-group>
        </view>

        <view style="height: 32px; border-bottom: 0">
          <u-radio-group
            v-model="value12"
            placement="row"
            labelSize="30"
            size="30"
            iconSize="30"
            @change="change(12, $event)"
          >
            <u-radio
              activeColor="#F2AF60"
              name="是"
              label="是"
              labelSize="24"
            ></u-radio>
            <u-radio
              activeColor="#F2AF60"
              name="有时"
              label="有时"
              labelSize="24"
            ></u-radio>
            <u-radio
              activeColor="#F2AF60"
              name="否"
              label="否"
              labelSize="24"
            ></u-radio>
          </u-radio-group>
        </view>
      </view>
    </view>

    <view class="table-tr">
      <view>社会方面</view>
      <view style="width: 200px; overflow: hidden">
        <view>13.您是否独居</view>
        <view>14.您是不是有时候会希望有 人陪伴在您身边</view>
        <view>15.您是否可以从他人那里得 到足够的帮助</view>
      </view>
      <view class="active23">
        <view>
          <u-radio-group
            v-model="value13"
            placement="row"
            labelSize="30"
            size="30"
            iconSize="30"
            @change="change(13, $event)"
          >
            <u-radio
              activeColor="#F2AF60"
              name="是"
              label="是"
              labelSize="24"
            ></u-radio>
            <u-radio
              activeColor="#F2AF60"
              name="有时"
              label="有时"
              disabled
              labelSize="24"
            ></u-radio>
            <u-radio
              activeColor="#F2AF60"
              name="否"
              label="否"
              labelSize="24"
            ></u-radio>
          </u-radio-group>
        </view>

        <view style="height: 32px">
          <u-radio-group
            v-model="value14"
            placement="row"
            labelSize="30"
            size="30"
            iconSize="30"
            @change="change(14, $event)"
          >
            <u-radio
              activeColor="#F2AF60"
              name="是"
              label="是"
              labelSize="24"
            ></u-radio>
            <u-radio
              activeColor="#F2AF60"
              name="有时"
              label="有时"
              labelSize="24"
            ></u-radio>
            <u-radio
              activeColor="#F2AF60"
              name="否"
              label="否"
              labelSize="24"
            ></u-radio>
          </u-radio-group>
        </view>

        <view style="height: 32px">
          <u-radio-group
            v-model="value15"
            placement="row"
            labelSize="30"
            size="30"
            iconSize="30"
            @change="change(15, $event)"
          >
            <u-radio
              activeColor="#F2AF60"
              name="是"
              label="是"
              labelSize="24"
            ></u-radio>
            <u-radio
              activeColor="#F2AF60"
              name="有时"
              label="有时"
              disabled
              labelSize="24"
            ></u-radio>
            <u-radio
              activeColor="#F2AF60"
              name="否"
              label="否"
              labelSize="24"
            ></u-radio>
          </u-radio-group>
        </view>
      </view>
    </view>

    <view class="sm">
      （说明：量表条目每项得分为0分或者1分，计分范围为0~15分，4分及
      以上为衰弱，分数越高，衰弱程度越重）
    </view>
		
		<view class="base-operation-two">
			<view class="save" @click="handleSaveWeakness">保存</view>
			<!-- <view class="cancel" @click="weaknessScoreShow = false">取消</view> -->
		</view>
  </view>
</template>

<script>
export default {
  name: "Table",
  data() {
    return {
      value1: "",
      value2: "",
      value3: "",
      value4: "",
      value5: "",
      value6: "",
      value7: "",
      value8: "",
      value9: "",
      value10: "",
      value11: "",
      value12: "",
      value13: "",
      value14: "",
      value15: "",
			
			count: 0,
			data: null
    };
  },
  methods: {
    change(num, event) {
			if(event == '是') {
				this.count++;
				this.data = {
					'value1': this.value1,
					'value2': this.value2,
					'value3': this.value3,
					'value4': this.value4,
					'value5': this.value5,
					'value6': this.value6,
					'value7': this.value7,
					'value8': this.value8,
					'value9': this.value9,
					'value10': this.value10,
					'value11': this.value11,
					'value12': this.value12,
					'value13': this.value13,
					'value14': this.value14,
					'value15': this.value15
				}
			}
    },
		handleSaveWeakness() {
			uni.$emit("handleSave", {
				count: this.count,
				data: this.data
			})
		}
  },
};
</script>

<style scoped lang="scss">
.active22 > view {
  height: 16px;
  border-right: 0;
}
.active23 {
  border-left: 0;
  border-bottom: 0;
  view {
    margin: 0px;
    height: 16px;
    width: 130px;
    display: flex;
    // flex-direction: column;
    align-items: center;
    // justify-content: center;
  }
}

.sm {
  color: #afafaf;
  text-align: left;
}
.table {
  font-size: 12px;
  color: #565656;
  text-align: center;
  // overflow: hidden;
  .table-th {
    display: flex;
    overflow: hidden;
    align-items: center;
    background-color: #faf7f4;
    // height: 40px;
    text-align: center;
    border-bottom: 0;
    > view {
      padding: 8px 0;

      border: 1px solid #dddddd;
    }
  }
  .table-tr {
    // height: 300px;
    display: flex;
    // align-items: center;
    view {
      border: 0.5px solid #ddd;
      // border-right: 0;
    }
    > view:first-child {
      border-right: 0;
      width: 40px;
      // height: 100%;
      // align-self: center;
    }
    // > view:nth-child(2) {
    // 	width: 10	0px;
    // }
    > view:last-child {
      border-right: 2px solid #eee;
    }
    .table-tr-three {
      display: flex;
      border-right: 0;
      > view:first-child {
        width: 40px;
      }
    }
  }
}
</style>
